<template>
    <a-modal v-model:open="data.open" width="580px" style="top: 50vh;right: -490px;" :closable="false"
             @cancel="handleCancel" :mask="false" wrap-class-name="small-modal-wrap" :footer="null">
        <template #title>
            <div class="color-modal-header">
                <span class="color-modal-title">颜色</span>
                <a-button type="primary" class="add-btn" size="small" @click="addCondition">添加条件</a-button>
            </div>
        </template>
        <div class="color-modal-content">
            <div class="condition-box">
                <div class="condition-item" v-for="(item,index) in data.conditionData">

                    <template v-if="data.dataType === 'number'">
                        <a-input-group compact class="input-group">
                            <a-input-number v-model:value="item.comparisonMin" class="condition-input"
                                            placeholder="无限制" />
                            <a-select v-model:value="item.comparisonExpression1" :showArrow="false"
                                      :dropdownMatchSelectWidth="false"
                                      class="input-select">
                                <a-select-option value="<"> <（小于）</a-select-option>
                                <a-select-option value="<="> ≤（小于等于）</a-select-option>
                                <a-select-option value="="> =（等于）</a-select-option>
                            </a-select>
                        </a-input-group>
                        <span class="condition-text">值</span>
                        <a-input-group compact class="input-group">
                            <a-select v-model:value="item.comparisonExpression2" :showArrow="false"
                                      :dropdownMatchSelectWidth="false"
                                      class="input-select">
                                <a-select-option value="<"> <（小于）</a-select-option>
                                <a-select-option value="<="> ≤（小于等于）</a-select-option>
                                <a-select-option value="="> =（等于）</a-select-option>
                            </a-select>
                            <a-input-number v-model:value="item.comparisonMax" class="condition-input"
                                            placeholder="无限制" />
                        </a-input-group>
                    </template>

                    <template v-if="data.dataType === 'date'">
                        <span class="condition-text">值</span>

                        <a-select v-model:value="item.dateExpression" :showArrow="false"
                                  :dropdownMatchSelectWidth="false" style="flex: 0 0 100px;margin-right: 5px"
                                  class="input-select">
                            <a-select-option value="~"> 范围 </a-select-option>
                            <a-select-option value="<="> 之前 </a-select-option>
                            <a-select-option value=">="> 之后 </a-select-option>
                        </a-select>

                        <a-range-picker v-if="item.dateExpression === '~'" v-model:value="item.dateRange" show-time />
                        <a-date-picker v-else v-model:value="item.dateValue" show-time showToday/>
                    </template>

                    <template v-if="data.dataType === 'string'">
                        <span class="condition-text">值</span>

                        <a-select v-model:value="item.stringValueExpression" :showArrow="false"
                                  :dropdownMatchSelectWidth="false" style="flex: 0 0 100px;margin-right: 5px"
                                  class="input-select">
                            <a-select-option value="="> 等于</a-select-option>
                            <a-select-option value="!="> 不等于</a-select-option>
                            <a-select-option value="like"> 包含</a-select-option>
                            <a-select-option value="not like"> 不包含</a-select-option>
                            <a-select-option value="is null"> 为空</a-select-option>
                            <a-select-option value="is not null"> 不为空</a-select-option>
                        </a-select>

                        <a-input
                            v-if="item.stringValueExpression !== 'is null' && item.stringValueExpression !== 'is not null'"
                            v-model:value="item.stringValue" class="condition-input"
                            placeholder="无限制" />
                    </template>

                    <dcColorPicKer mode="slot" v-model="item.fontColor">
                        <div class="color-box" title="文字颜色">
                            <span class="condition-color">
                                <FontColorsOutlined :style="{color: item.fontColor}" />
                            </span>
                        </div>
                    </dcColorPicKer>
                    <dcColorPicKer mode="slot" v-model="item.bgColor">
                        <div class="color-box" title="背景颜色">
                            <span class="condition-color">
                                <BgColorsOutlined :style="{color: item.bgColor}" />
                            </span>
                        </div>
                    </dcColorPicKer>
                    <DeleteOutlined @click="deleteCondition(index)" title="删除" class="delete-icon" />
                </div>
            </div>
            <a-alert message="注:当条件冲突时，第一个条件生效" type="warning" show-icon style="padding: 5px 8px" />
        </div>
    </a-modal>
</template>

<script setup>
import { reactive } from "vue";
import dcColorPicKer from "../colorPicker/dcColorPicker.vue";

const props = defineProps({});

const data = reactive({
    open: false,
    conditionData: [],
    dataType: "",
});

const open = (item, dataType) => {
    data.conditionData = item;
    data.dataType = dataType;
    data.open = true;
};

const close = () => {
    data.open = false;
};

// 添加条件
const addCondition = () => {
    data.conditionData.push({
        comparisonMin: "",
        comparisonExpression1: "<",
        comparisonExpression2: "<=",
        comparisonMax: "",

        stringValue: "",
        stringValueExpression: "=",

        dateValue : "",
        dateRange : [],
        dateExpression: "~",

        fontColor: "#333333",
        bgColor: "#333333",
    });
};

// 删除条件
const deleteCondition = (index) => {
    data.conditionData.splice(index, 1);
};

const handleCancel = () => {
    close();
};

defineExpose({ open, close });

</script>

<style lang="less" scoped>
.color-modal-header {
    display: flex;
    justify-content: space-between;
}

.color-modal-content {
    height: auto;
    padding: 0 10px 10px;

    .condition-box {
        width: 100%;
        height: 200px;
        padding: 10px;
        overflow: auto;
        border: 1px solid var(--borderColor);
        margin-bottom: 8px;
        border-radius: 6px;

        .condition-item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .condition-input {
                width: calc(100% - 35px);
            }

            .input-group {
                flex: 0 0 210px;
            }

            .input-select {
                width: 35px;
            }

            .condition-text {
                display: block;
                padding: 0 5px;
            }

            .delete-icon {
                font-size: 16px;
                color: #b1b1b1;
                margin-left: 5px;
                cursor: pointer;
                transition: all 0.3s;

                &:hover {
                    color: #333;
                }
            }

            .color-box {
                display: flex;
                position: relative;
                margin-left: 5px;

                .condition-color {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 32px;
                    cursor: pointer;
                    height: 32px;
                    font-size: 18px;
                    border: 1px solid var(--borderColor);
                    border-radius: 6px;

                    &:hover {
                        background-color: #fafafa;
                    }
                }
            }
        }
    }
}
</style>
